<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <!-- <img class="logo" src="../../assets/toutiao_logo.png" alt="" /> -->
        <img class="logo" :src="img" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>

    <van-tabs animated sticky offset-top="1.226667rem" swipeable v-model="channelId">
      <van-tab :title="item.name" v-for="item in channelList" :key="item.id" :name="item.id">
        <ArticleList :id="channelId"></ArticleList
      ></van-tab>
    </van-tabs>
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show = true" />
    <van-popup v-model="show" class="edit_channel">
      <!--  v-model :双向绑定 v-model 1.:value=channelId @input="channelId=输入的值" -->
      <ChannelEdit
        v-model="channelId"
        ref="ChannelEdit"
        :mychannelList="channelList"
        @addChannel="addChannelFn"
        @removeChannel="removeChannelFn"
        @close="closeFN"
      ></ChannelEdit
    ></van-popup>
    <!-- 二级路由页面 -->

    <router-view></router-view>

    <!-- 下面底部导航 -->
  </div>
</template>

<script>
import img from '@/assets/img/logo.png'
import { getHomeChannelAPI } from '@/api/home.js'
import { updateChannelListAPI } from '@/api/channel.js'
import ArticleList from '@/views/Home/Articlelist.vue'
import ChannelEdit from '@/views/Home/components/ChannelEdit.vue'
const scrollTop = {}
export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  watch: {
    channelId(newValue, oldValue) {
      scrollTop[oldValue] = window.scrollY
      console.log(newValue, oldValue, scrollTop)
      setTimeout(() => {
        window.scrollTo(0, scrollTop[newValue])
      })
    }
  },
  data() {
    return {
      show: false,
      img,
      channelId: 0,
      channelList: []
    }
  },
  methods: {
    async update() {
      const newArr = this.channelList.map(obj => {
        const newobj = { ...obj }
        return newobj
      })
      const index = newArr.findIndex(val => val.id === 0)
      newArr.splice(index, 1)
      newArr.forEach((obj, index) => {
        obj.seq = index + 1
        delete obj.name
      })
      const res = await updateChannelListAPI({ channels: newArr })
      console.log(res)
    },
    async addChannelFn(val) {
      this.channelList.push(val)
      this.update()
    },
    removeChannelFn(val) {
      const index = this.channelList.findIndex(item => {
        return item.id === val.id
      })
      this.channelList.splice(index, 1)
      this.update()
    },
    closeFN() {
      this.show = false
      this.$refs.ChannelEdit.isEdit = false
    }
    // changeChannelFn(val) {
    //   this.channelId = val
    // }
  },
  async created() {
    const res = await getHomeChannelAPI()
    this.channelList = res.data.data.channels
  },
  beforeRouteLeave(to, from, next) {
    console.log(from)
    from.meta.top = window.scrollY
    next()
  }
}
</script>
<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
/deep/ .van-tabs__content {
  padding-top: 44px;
}
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.edit_channel {
  height: 100%;
  width: 100%;
}
</style>
